<html>
    <head>
        <style>
            .headbox {display:flex; flex-wrap:wrap; width:100%; margin:0 auto; border:1px solid #888}
            .box1 {flex:1 0 200px; height:200px; margin:30px 0 0 30px; background-color:#f88}
            .box2 {flex:2 0 400px; height:200px; margin:30px 30px 0 30px; background-color:#8f8}
            .box3 {flex:2 0 400px; height:200px; margin:30px 0 30px 30px; background-color:#88f}
            .box4 {flex:1 0 200px; height:200px; margin:30px; background-color:#ff8}
            
            </style>
            
            <div class="headbox">
            
               <div class="box1">BOX1</div>
               <div class="box2">BOX2</div>
               <div class="box3">BOX3</div>
               <div class="box4">BOX4</div>
            </div>
    </head>
</html>